<template>
  <div class="wrapper">
    <div class="titel-row">
      <div class="home-icon">
        <img src="../../assets/inquiryRegister/home.png" alt>
      </div>
      <div class="title">我的待办</div>
    </div>
    <div class="content">
      <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig"/>
      <div class="table-wrapper">
        <el-table
          v-on:cell-click="onClickRow"
          :row-class-name="tableRowClassName"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column
            v-for="(item,index) in thConfig"
            :key="index"
            v-bind:prop="item.prop"
            v-bind:label="item.label"
          ></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-tooltip content="查看" placement="top">
                <el-button
                  v-on:click.stop.prevent="onDetail(scope.row)"
                  icon="el-icon-search"
                  size="small"
                  circle
                />
              </el-tooltip>
              <el-tooltip content="督办" placement="top">
                <el-button
                  v-on:click.stop.prevent="openDialog('ProcessingDialog',{item:scope.row,btnType:1})"
                  size="small"
                  type="primary"
                  circle
                ><img width="12px" :src="dubanIcon" alt/></el-button>
              </el-tooltip>
              <el-tooltip content="办结" placement="top">
                <el-button
                  v-on:click.stop.prevent="openDialog('ProcessingDialog',{item:scope.row,btnType:2})"
                  size="small"
                  type='success'
                  circle
                ><img width="12px" :src="banjieIcon" alt/></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.eventStatus==0" content="分拣" placement="top">
                <el-button
                  v-on:click.stop.prevent="openDialog('toAcceptDialog',{item:scope.row})"
                  size="small"
                  type="primary"
                  circle
                ><img width="12px" :src="fenjianIcon" alt/></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="request.pageNum"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <TimeLineDetail
      width="1000px"
      :dialogVisible="detailVisible"
      @onClose="detailVisible=false"
      :list="detailData"
      :columns="detailColumns"
    />
    <ProcessingDialog/>
    <ToAcceptDialog/>
  </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import { Popover, TimeLineDetail } from "../../components/common"; //小弹窗
import Pubsub from "../../utils/pubsub";
import ProcessingDialog from "../../components/pigeonholes/processingDialog.vue"; //督办/办结弹窗
import ToAcceptDialog from "../../components/pigeonholes/toAcceptDialog.vue"; //办结
const dubanIcon = require("../../assets/sortingRegister/duban.png");
const banjieIcon = require("../../assets/sortingRegister/banjie.png");
const fenjianIcon = require("../../assets/sortingRegister/fenjian.png");
import {
  sortingEventinfoQueryCorePage,
  deletePretrial,
  tyAddHandle,
  findByDictCode,
  tyEditHandle,
  distribute
} from "../../config/api.js";
import { getTimeStr } from "../../utils";
export default {
  components: {
    SearchHeader,
    Popover,
    TimeLineDetail,
    ProcessingDialog,
    ToAcceptDialog,
  },
  data() {
    return {
      dubanIcon,
      banjieIcon,
      fenjianIcon,
      request: {
        pageNum: 1,
        pageSize: 10,
        module: "list",
        eventName: "",
        startTime: "",
        endTime: ""
      }, //列表请求参数
      detailVisible: false, //详情窗口显示隐藏
      rejectVisible: false, //驳回窗口显示隐藏
      detailData: {}, //详情数据
      rejectItem: {}, //驳回项的数据
      areaCode: [], //数据字典返回值--区域
      multipleSelection: [], //选中的项
      total: 0, //共多少条
      handleType: "", //操作预审登记状态，add为新增，edit为编辑。
      currentRow: {}, //当前操作的项
      thConfig: [
        // { prop: "ems", label: "快递编码" },
        { prop: "eventName", label: "事件名称" },
        { prop: "eventAddress", label: "事件地点" },
        { prop: "eventStatusName", label: "案件状态" },
        { prop: "eventSourceName", label: "案件来源" },
        { prop: "newCreateTime", label: "上报时间" }
      ], //table头部配置
      tableData: [],
      searchConfig: [
        //搜索栏配置
        {
          label: "全部",
          code: "keyword",
          type: "search",
          value: ""
        },
        {
          label: "上报时间",
          code: ["startTime", "endTime"],
          type: "rangePicker",
          value: ""
        },
        {
          label: "案件状态",
          code: "status",
          type: "radio",
          value: "",
          data: [
            { name: "全部", value: "", active: true },
            { name: "待受理", value: "0", active: false },
            { name: "分拣中", value: "2", active: false },
            { name: "处置中", value: "3", active: false }
          ]
        },
        {
          label: "案件来源",
          code: "eventSourceCode",
          type: "radio",
          value: "",
          data: [{ name: "全部", value: "", active: true }],
          delectVisible: false
        }
      ],
      detailColumns: [
        {
          title: "事件名称",
          dataIndex: "eventName"
        },
        {
          title: "事件地点",
          dataIndex: "eventAddress"
        },

        {
          title: "案件状态",
          dataIndex: "eventStatusName"
        },
        {
          title: "案件来源",
          dataIndex: "eventSourceName"
        },
        {
          title: "上报时间",
          dataIndex: "newCreateTime"
        }
      ]
    };
  },
  mounted() {
    this.pubsub_token = Pubsub.subscribe("myBacklogList", (type, values) => {
      // 用于督办/办结后回调执行刷新列表
      this.getList();
    });
    this.getList();
    this.getDictCode();
  },
  destroyed() {
    this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
  },
  methods: {
    /**
     * 获取数据字典--取件类型
     */
    getDictCode() {
      //事件来源数据字典
      findByDictCode({ dictCode: "sortingEventSourceCode" }).then((res = {}) => {
          let newData = res.data && res.data.length ? res.data : [];
          if (newData.length > 0) {
            newData.map(item => {
              item.name = item.dictDataName;
              item.value = item.dictDataCode;
              item.active = false;
            });
          };
          (this.searchConfig.find(item => item.code == "eventSourceCode") || {}).data = [{ name: "全部", value: "", active: true }, ...newData];
        }
      );
    },
    /**
     * 搜索栏回调
     */
    onSearchCallback(re = {}) {
      let request = Object.assign(this.request, re);
      this.request = request;
      this.getList();
    },
    /**
     * 设置table某一项class
     */
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 2) {
      //   return "warning-row";
      // }
      if (rowIndex % 2 === 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
    /**
     * 设置选中项
     */
    handleSelectionChange(e = []) {
      if (e.length) {
        e.map(item => {
          this.multipleSelection.push(item.id);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    /**
     * 查看详情
     */
    onDetail(e) {
      // this.detailData=e||{};//传参
      this.detailData = e || {}; //传参
      this.detailVisible = true;
    },
    //删除，不需要任何事件，只为处理事件冒泡。
    onDelete() {},
    /**
     * 驳回-回调
     */
    rejectcallBack(e) {
      this.rejectVisible = false;
      this.getList();
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.request.pageNum = val;
      this.getList();
    },
    /**
     * 操作按钮点击事件
     */
    openDialog(type, values) {
      	Pubsub.publish(type, values);
    },
    getList() {
      sortingEventinfoQueryCorePage(this.request).then((res = {}) => {
        if(res.rows&&res.rows.length){
          res.rows.map(r=>{
            r.newCreateTime=getTimeStr(r.createTime);
          })
        }
        this.tableData = res.rows;
        this.total = res.total || 0;
      });
    },
    dispatch(values) {
      this.$confirm("请确认是否分发?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          distribute({ ids: this.multipleSelection }).then((res = {}) => {
            this.$message({
              type: "success",
              message: "分发成功!"
            });
            this.multipleSelection = [];
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    /**
     * 点击table row
     */
    onClickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    }
  },
  created() {
  }
};
</script>

<style lang = "scss" scoped>
.wrapper {
  margin: 20px;
  background: #fff;
}
.titel-row {
  display: flex;
  align-items: center;
  .home-icon {
    height: 50px;
    width: 50px;
    background: #1a36a9;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-size: 22px;
    color: #272c67;
  }
}
.content {
  padding: 0 20px 80px 20px;
}
.pager {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.table-wrapper {
  position: relative;
  margin-top: 46px;
  .handle-row {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }
  .handle-btn {
    width: 76px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 10px;
    }
    &:last-child {
      margin-right: 0;
    }
    &:active {
      opacity: 0.8;
    }
    &.main {
      background: #1a36a9;
      color: #fff;
    }
    &.green {
      background: #007130;
      color: #fff;
    }
    &.default {
      background: #e5e5e5;
    }
    &:disabled {
      background: #999;
      opacity: 1;
    }
  }
}
</style>
<style>
</style>
